import { useEffect, useState } from "react";
import { Tabs, List, Avatar, Tag, Button, Skeleton } from "antd";
import {
  getFriendApplyList,
  IApplyFriendDto,
  agreeFriendApply,
  rejectFriendApply,
} from "@/apis/friends";

const { TabPane } = Tabs;

function getApplyStatus(status: string) {
  return {
    Pending: "审核中",
    Approved: "已通过",
    Rejected: "已拒绝",
  }[status];
}
export function Notice() {
  const [applyList, setApplyList] = useState<IApplyFriendDto | null>(null);

  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
    async function getApplyList() {
      setIsLoading(true);
      const [success, data] = await getFriendApplyList();
      if (success) {
        setApplyList(data);
      }
      setIsLoading(false);
    }
    getApplyList();
  }, []);

  const handleAgree = async (id: number) => {
    // TODO: 同意好友申请
    const [agressSuccess] = await agreeFriendApply(id);
    if (agressSuccess) {
      const [success, data] = await getFriendApplyList();
      if (success) {
        setApplyList(data);
      }
    }
  };
  const handleReject = async (id: number) => {
    // TODO: 拒绝好友申请
    const [rejectSuccess] = await rejectFriendApply(id);
    if (rejectSuccess) {
      const [success, data] = await getFriendApplyList();
      if (success) {
        setApplyList(data);
      }
    }
  };

  return (
    <div className="w-full m-6 ml-0 p-6  rounded-xl bg-[#323644] ">
      <Tabs defaultActiveKey="1">
        <TabPane tab="我发出的" key="1" className="!text-violet-50">
          {isLoading ? (
            // Skeleton 占位符效果
            Array.from({ length: 3 }).map((_, index) => (
              <Skeleton key={index} active avatar />
            ))
          ) : (
            <List
              itemLayout="horizontal"
              dataSource={applyList?.fromMe}
              renderItem={(request) => (
                <List.Item className="bg-gray-700 !p-4 mb-2 rounded-lg flex items-center justify-between">
                  <List.Item.Meta
                    className="!items-center"
                    avatar={
                      <Avatar className="bg-gray-600 font-bold">
                        {request.toUser.nickName
                          ? request.toUser.nickName.charAt(0)
                          : "U"}
                      </Avatar>
                    }
                    title={
                      <span className="text-white">
                        {request.toUser.nickName || "未知用户"}
                      </span>
                    }
                    description={
                      <span className="text-gray-400">
                        {request.reason} -{" "}
                        {new Date(request.createTime).toLocaleString()}
                      </span>
                    }
                  />
                  <Tag
                    color={
                      request.status === "Approved"
                        ? "green"
                        : request.status === "Pending"
                        ? "yellow"
                        : "red"
                    }
                  >
                    {getApplyStatus(request.status)}
                  </Tag>
                </List.Item>
              )}
            />
          )}
        </TabPane>
        <TabPane tab="我接收的" key="2">
          {isLoading ? (
            // Skeleton 占位符效果
            Array.from({ length: 3 }).map((_, index) => (
              <Skeleton key={index} active avatar />
            ))
          ) : (
            <List
              itemLayout="horizontal"
              dataSource={applyList?.toMe}
              renderItem={(request) => (
                <List.Item className="bg-gray-700 !p-4 mb-2 rounded-lg flex items-center justify-between">
                  <List.Item.Meta
                    avatar={
                      <Avatar className="bg-gray-600">
                        {request.fromUser.nickName
                          ? request.fromUser.nickName.charAt(0)
                          : "U"}
                      </Avatar>
                    }
                    title={
                      <span className="text-white">
                        {request.fromUser.nickName || "未知用户"}
                      </span>
                    }
                    description={
                      <span className="text-gray-400">
                        {request.reason} -{" "}
                        {new Date(request.createTime).toLocaleString()}
                      </span>
                    }
                  />
                  {request.status === "Pending" ? (
                    <div className="flex space-x-2">
                      <Button
                        type="primary"
                        onClick={() => handleAgree(request.fromUserId)}
                      >
                        同意
                      </Button>
                      <Button
                        danger
                        onClick={() => handleReject(request.fromUserId)}
                      >
                        拒绝
                      </Button>
                    </div>
                  ) : (
                    <Tag
                      color={request.status === "Approved" ? "green" : "gray"}
                    >
                      {getApplyStatus(request.status)}
                    </Tag>
                  )}
                </List.Item>
              )}
            />
          )}
        </TabPane>
      </Tabs>
    </div>
  );
}
